<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title  class="systemName"></title>
    <base id="base" href="/">
    <link rel="stylesheet" href="css/common/public.css">
    <link rel="stylesheet" href="plugin/bootstrap-table-master/bootstrap-table.min.css">
    <link rel="stylesheet" href="plugin/ztree/css/zTreeStyle/zTreeStyle.css">
</head>
<body class="gray-bg">
    <div id="app" v-cloak>
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>角色列表</h5>
                            <div class="ibox-tools"></div>
                        </div>
                        <div class="ibox-content">
                            <div class="row">
                                <div class="col-xs-4 input-group" style="margin-left: 15px;">
                                    <input class="form-control" v-model="roleName" placeholder="请输入角色名称" @keyup.enter="search"/>
                                    <span class="input-group-btn">
                                        <button class="btn btn-outline btn-default" @click="search">
                                            <i class="fa fa-search"></i>&nbsp;查询
                                        </button>
                                    </span>
                                </div>
                            </div>
                            <div class="row row-lg">
                                <div class="col-sm-12">
                                    <!--toolbar-->
                                    <div id="toolbar" class="btn-group m-t-sm">
                                        <button data-check-permission="sys:role:add" type="button" class="btn btn-outline btn-default" @click="add">
                                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;新增
                                        </button>
                                        <button data-check-permission="sys:role:edit" type="button" class="btn btn-outline btn-default" @click="edit">
                                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;修改
                                        </button>
                                        <button data-check-permission="sys:role:delete" type="button" class="btn btn-outline btn-default" @click="del">
                                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>&nbsp;删除
                                        </button>
                                    </div>
                                    <!--bootstrapTable-->
                                    <table id="tbSysRole"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--角色编辑-->
        <div class="ibox-content"  id="roleCreateOrUpdate" v-show="isShowRoleForm">
            <form id="roleform" class="form-horizontal">
                <div class="form-group m-t">
                    <label class="col-sm-2 control-label">角色名称：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="roleName" id="roleName">
                    </div>
                    <label class="col-sm-2 control-label">角色标识：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="roleSign" id="roleSign">
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">角色授权：</label>
                    <div class="col-sm-10">
                        <div id="ztreedemo" class="ztree"></div>
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">角色备注：</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" rows="2"  name="remark" placeholder="请输入消息..." style="height: 100px; width: 600px;"></textarea>
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-4 add-submit">
                        <input type="hidden" class="form-control" id="id" name="id">
                        <button class="btn btn-primary" type="button" @click="save">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
<!-- 全局js -->
<script src="js/common/public.js"></script>
<!-- Bootstrap table -->
<script src="plugin/bootstrap-table-master/bootstrap-table.min.js"></script>
<script src="plugin/bootstrap-table-master/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- ztree -->
<script src="plugin/ztree/jquery.ztree.all.min.js"></script>
<!-- iCheck -->
<script src="plugin/icheck/icheck.min.js"></script>
<script src="js/modules/sys/role.info.js"></script>
</html>